---
title: Streaming Data
description: Welcome to the Vercel AI SDK documentation!
---

# Streaming Data

Depending on your use case, you may want to stream additional data alongside the model's response. This can be achieved with [`StreamData`](/docs/reference/stream-helpers/stream-data).

## What is StreamData

The `StreamData` class allows you to stream arbitrary data to the client alongside your LLM response. This can be particularly useful in applications that need to augment AI responses with metadata, auxiliary information, or custom data structures that are relevant to the ongoing interaction.

## How To Use StreamData

To use `StreamData`, create a `StreamData` value on the server, append some data and then return it alongside the model response with [`StreamingTextResponse`](/docs/reference/stream-helpers/streaming-text-response). On the client, the [`useChat`](/docs/reference/ai-sdk-ui/use-chat) hook returns `data`, which will contain the additional data.

### On the server

<Note>
  While this example uses Next.js (App Router), `StreamData` is compatible with
  any framework.
</Note>

```tsx highlight="17-31"
import { openai } from '@ai-sdk/openai';
import { StreamingTextResponse, streamText, StreamData } from 'ai';

// Allow streaming responses up to 30 seconds
export const maxDuration = 30;

export async function POST(req: Request) {
  // Extract the `messages` from the body of the request
  const { messages } = await req.json();

  // Call the language model
  const result = await streamText({
    model: openai('gpt-4-turbo'),
    messages,
  });

  // Create a new StreamData
  const data = new StreamData();

  // Append additional data
  data.append({ test: 'value' });

  // Convert the response into a friendly text-stream
  const stream = result.toAIStream({
    onFinal(_) {
      data.close();
    },
  });

  // Respond with the stream and additional StreamData
  return new StreamingTextResponse(stream, {}, data);
}
```

### On the client

On the client, you can destructure `data` from the `useChat` hook which stores all `StreamData` in an array. The `data` is of the type `JSONValue[]`.

```tsx
const { data } = useChat();
```

Future versions of the AI SDK will support each `Message` having a `data` object attached to it.
